import React from 'react';
import { Toast, } from 'antd-mobile';

export default class Index extends React.Component {
    constructor(props){
        super(props)
        this.state={
			tel: '',
			code: '',
			pwd: '',
			invoce: '',
			active: false,
			codetxt: '立即获取',
			code_btn: false,
		}
		this.timer=null
    }
	componentDidMount(){
		document.title = '注册';

		var phone = this.GetQueryValue('phone');

		console.log(phone);

		if (phone) {
			this.setState({
				invoce:phone
			})
		}
	}
	componentWillUnmount(){
		if(this.timer){
			
			clearInterval(this.timer)
		}
	}

	GetQueryValue(queryName) {
		var query = decodeURI(window.location.hash.substring(1));
		var vars = query.split("?");
		for (var i = 0; i < vars.length; i++) {
			var pair = vars[i].split("=");
			if (pair[0] == queryName) { return pair[1]; }
		}
		return null;
	}

	// 发送验证码
	send_sms(){
		if(this.state.code_btn){
			return;
		}
		var time=120;
		if(this.state.tel.length!==11){
			return Toast.fail('请输入正确的手机号!',1)
		}
		this.setState({
			code_btn: true,
		})
		var req={
			phone: this.state.tel,
			sendtype: 1,
		}
		Toast.loading('发送中..')
		var _this=this;
		global.Ajax.hhtc_request("login/send_sms",req).then(data=>{
			console.log('data: ', data);
			Toast.hide()
			if(data.code===1){
				Toast.success(data.msg,1)
				this.timer=setInterval(() => {
					if(time>0){
						time--;
						_this.setState({
							codetxt: time+'s',
						})
					}else{
						clearInterval(_this.timer)
						_this.setState({
							code_btn: false,
							codetxt: '重新获取',
						})
						time=60;
					}
				}, 1000);
			}else{
				Toast.fail(data.msg, 1);
				this.setState({
					code_btn: false,
				})
			}
		})
	}
	// 注册
	reg(){
		if(this.state.tel.length!==11){
			return Toast.fail('请输入正确的手机号!',1)
		}
		if(this.state.code.length!==6){
			return Toast.fail('请输入验证码!',1)
		}
		if(this.state.pwd.length<6||this.state.pwd.length>16){
			return Toast.fail('请设置6-16位密码!',1)
		}
		if(!this.state.active){
			return Toast.fail('请勾选协议!',1)
		}
		Toast.loading()
		var req={
			phone: this.state.tel,
			code:this.state.code,
			password: this.state.pwd,
			invoce: this.state.invoce,
		}
		global.Ajax.hhtc_request("login/reg",req).then(data=>{
			Toast.hide()
			if(data.code===1){
				Toast.success(data.msg,1,()=>{
					this.props.history.goBack()
				})
			}else{
				Toast.fail(data.msg, 1);
			}
		})
	}
	render(){
		return(
			<div className='login'>
                <img alt='' src={require('../imgs/logo.png')} className='logo' />
				<div className='login_box'>
					<img alt='图标' src={require('../imgs/tel.png')} className='login_icon' />
					<input onChange={(e)=>{
                        this.setState({
                            tel: e.target.value
                        })
                    }} type='tel' placeholder='请输入账号' className='login_inpt' />
				</div>
				<div className='login_box'>
					<img alt='图标' src={require('../imgs/code.png')} className='login_icon' />
					<input onChange={(e)=>{
                        this.setState({
                            code: e.target.value
                        })
                    }} type='tel' placeholder='请输入验证码' className='login_inpt' />
                    <span className='code_btn' onClick={this.send_sms.bind(this)}>{this.state.codetxt}</span>
				</div>
				<div className='login_box'>
					<img alt='图标' src={require('../imgs/pwd.png')} className='login_icon' />
					<input onChange={(e)=>{
						this.setState({
							pwd: e.target.value,
						})
					}} type='password' placeholder='请设置6-16位密码' className='login_inpt' />
				</div>
				<div className='login_box'>
					<img alt='图标' src={require('../imgs/yqm.png')} className='login_icon' />
					<input onChange={(e)=>{
						this.setState({
							invoce: e.target.value,
						})
					}} type='tel' value={this.state.invoce} placeholder='请输入推荐人手机号（非必填）' className='login_inpt' />
				</div>
				<p className='login_sub_btn' onClick={this.reg.bind(this)}>注册</p>
                <div className='xiey'>
                    <span className={`${this.state.active?'active':''}`} onClick={()=>{
                        this.setState({
                            active: !this.state.active
                        })
                    }}></span>
                    <p>请先阅读并同意<span onClick={()=>{this.props.history.push('/login/login/agreement')}}>《用户隐私协议》</span></p>
                </div>
			</div>
		)
	}
}
